<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" @click="getBack" alt class="img_zuo" />
        <div>{{stylename}}</div>
      </div>
    </header>
    <div class="contant">
      <div>
        <!-- 专项任务 -->
        <div class="item" v-show="jutiname === ''">
          <div>专项任务</div>
          <div class="item_child" @click="zhuantan">
            <img class="img_appar" src="../../assets/images/icon-xc-add.png" />
          </div>
        </div>
        <div v-show="jutiname !== ''">
          <div class="list-box" @click="zhuantan">
            <span class="dian">专项任务一</span>
            <span class="yhd">{{ zhuanname }}</span>
          </div>
          <div class="list-box" @click="zhuantan">
            <span class="dian">具体任务一</span>
            <span class="yhd">{{ jutiname }}</span>
          </div>
        </div>
        <!-- 参加人员 -->
        <div class="item" v-show="qujiname === ''&& jiedaoname === '' && shequname === ''">
          <div>参加人员</div>
          <div class="item_child" @click="persontan">
            <img class="img_appar" src="../../assets/images/icon-xc-add.png" />
          </div>
        </div>
        <!-- 选择后显示参加人员 -->
        <div>
          <div class="list-box" @click="persontan" v-show="qujiname !== ''">
            <span class="dian">参加领导一</span>
            <span class="yhd">{{ qujiname }}</span>
          </div>
          <div class="list-box" @click="persontan" v-show="jiedaoname !== ''">
            <span class="dian">部门街道一</span>
            <span class="yhd">{{ jiedaoname }}</span>
          </div>
          <div class="list-box" @click="persontan" v-show="shequname !== ''">
            <span class="dian">社区一</span>
            <span class="yhd">{{ shequname }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 专项任务弹框 -->
    <van-popup v-model="zhuanshow" :close-on-click-overlay="false">
      <div class="contt1">
        <div class="tan_title">
          <div>专项任务</div>
          <img class="img_false" @click="zhuanshow=false" src="../../assets/images/false.png" />
        </div>
        <div class="main">
          <div class="zxrw_fj" v-for="(v,index) of zhuanlist" :key="index">
            <div @click="xuanzhe($event)" class="tanlist">
              <div>{{v.name}}</div>
            </div>
            <div class="jtrw hide" v-for="(n,item) of v.list" :key="item">
              <div @click="zhuanchildren(n,item,index)" :class="{active:n.xuanz}" class="tanlist tanchild" :data-name="v.name"
                :name="n.name" :data-id="v.id" :id="n.id">{{n.name}}</div>
            </div>
          </div>
        </div>
        <div class="button" @click="zhuanyes">确定</div>
      </div>
    </van-popup>
    <!-- 参加人员弹框 -->
    <van-popup v-model="persontanbox" :close-on-click-overlay="false">
      <div class="contt1">
        <div class="tan_title">
          <div>参加人员</div>
          <img class="img_false" @click="persontanbox=false" src="../../assets/images/false.png" />
        </div>
        <div class="main">
          <div class="personum">
            <div>人数</div>
            <input type="number" v-model="personnum" placeholder="请输入" />
          </div>
          <div class="boxg">
            <div class="personum" @click="btn($event)">
              <div>区级</div>
            </div>
            <div class="close_flex_next hide">
              <div @click="qujichoose(v,index)" class="cesjiedao" v-for="(v,index) of qujilist" :key="index" :class="{active:v.xuanz}">{{v.username}}</div>
              <div class="cesjiedao">
                <input @input="inputjy(1)" v-model="qujiadd" placeholder="请输入" />
              </div>
            </div>
          </div>
          <div class="boxg" v-show="lev==1||lev==2">
            <div class="personum" @click="btn($event)">
              <div>街道/部门</div>
            </div>
            <div class="close_flex_next hide">
              <div @click="jiedaochoose(v,index)" class="cesjiedao" v-for="(v,index) of jiedaolist" :key="index" :class="{active:v.xuanz}">{{v.username}}
              </div>
              <div v-show="lev==1||lev==2" class="cesjiedao">
                <input @input="inputjy(2)" v-model="jiedaoadd" placeholder="请输入" />
              </div>
            </div>
          </div>
          <div class="boxg" v-show="lev==2">
            <div @click="btn($event)" class="personum">
              <div>社区</div>
            </div>
            <div class="close_flex_next hide">
              <div @click="shequchoose(v,index)" class="cesjiedao" v-for="(v,index) of shequlist" :key="index" :class="{active:v.xuanz}">{{v.username}}
              </div>
              <div v-show="lev==2" class="cesjiedao">
                <input @input="inputjy(3)" v-model="shequadd" placeholder="请输入" />
              </div>
            </div>
          </div>
        </div>
        <div class="button" @click="personyes">确定</div>
      </div>
    </van-popup>

    <div class="yyandimg">
      <!-- 主题 -->
      <div class="iteminput">
        <div class="especil">主题</div>
        <textarea rows="1" v-model="theme" class="textare" placeholder="请输入"></textarea>
      </div>
      <!--受众-->
      <div class="iteminput">
        <div class="especil">受众</div>
        <textarea rows="1" v-model="audience" class="textare" placeholder="请输入"></textarea>
      </div>
      <div class="boxitem">
        <textarea @input="Textarea($event)" placeholder="请输描述内容(500字以内)" id="txtbxnr" v-model="txtbxnr" maxlength="500" ref="count"></textarea>
        <span class="wordnum">{{wordnumber}}/500</span>
      </div>

      <div class="ly_tc">
        <img src="../../assets/images/ly_dt.gif" alt="" />
      </div>
      <div class="yuyin_list">
        <div class="ly_start">
          <span class="ly">
            <img src="../../assets/images/mkf.png" />
            <span>按住说话</span>
          </span>
        </div>
        <div class="ly_play" data-url="null">
          <div>
            <span class="ly">
              <img src="../../assets/images/play.png" />
              <span class="ly_s">0"</span>
            </span>
            <img class="del_ly" src="../../assets/images/delete.png" />
            <img class="zhuan" src="../../assets/images/zhuan.png" />
          </div>
        </div>
      </div>

      <ul class="img-box img_upload">
        <div @click="clickpicture" class="img-item radius-m"></div>
      </ul>
      <ul class="img-box imgs_ul" v-show="list_img.length>0">
        <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) of list_img" :key="i">
          <div class="img-content">
            <img class="img-src img_tu" :src="show_path + obj.imgs" />
            <div class="img-group">
              <div class="img-btn">
                <div class="del-btn" @click.stop="del(i,'img')">X</div>
              </div>
              <div class="img-btn">
                <div class="desc-btn" @click.stop="showDesc(i)">A</div>
              </div>
            </div>
          </div>
          <input class="img-desc" type="text" :style="i === number ? 'display: block;' : ''" @click.stop="stopMP"
            placeholder="请输入描述" v-model="imgText[i]" />
        </li>
      </ul>
      <ul class="video-list" v-for="(obj,i) of list_mv">
        <video controls>
          <source :src="show_path+obj.video" type="video/mp4">
          <source :src="show_path+obj.video" type="video/ogg">
          您的浏览器不支持Video标签。
        </video>
        <div class="del" @click.stop="del(i,'mv')"><img src="../../assets/images/delete.png" /></div>
      </ul>
    </div>
    <div style="box-sizing: border-box;padding:20px 10px;">
      <div @click="lastyes" style="width: 90%;" class="button">确认</div>
    </div>
    <van-popup v-model="btm_show" position="bottom" :close-on-click-overlay="false">
      <div class="btm_tk_item">上传资料</div>
      <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
      <div class="btm_tk_item" @click="pz">拍照</div>
      <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
      <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
    </van-popup>
    <!-- 提示弹框 -->
    <van-popup v-model="tishitan" :close-on-click-overlay="false">
      <div class="contt">
        <div class="tan_title">
          <div>提示</div>
          <img class="img_false" @click="tishitan=false" src="../../assets/images/false.png" />
        </div>
        <div class="tishi_main">
          {{namess}}
        </div>
        <div style="box-sizing: border-box;padding-bottom:10px;">
          <div @click="tishitan=false" class="button">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
  import {Dialog, Toast} from 'vant';
  import upload from "../../assets/js/upload_vue.js"
  import terminal from "@/assets/js/terminal";
  export default {
    name: "xcbs_add",
    data() {
      return {
        number: null,
        imgText: [],
        tishitan: false, //提示弹框
        zhuanshow: false, //专项弹框
        btm_show: false, //图片选择
        persontanbox: false, //参加人员弹框
        userId:'',
        namess: '',
        patrolTroubleshootId: '',
        personnum:"", //参加人员人数
        personnum_1:0,
        qujiname:'', //区级人员名字
        jiedaoname:'', //街道人员名字
        shequname:'', //社区人员名字
        zhuanname: '', //专项任务名字
        jutiname: '', //具体任务名字
        txtbxnr: '', //备注
        zhuanlist: [],
        qujilist: [],
        jiedaolist: [],
        shequlist: [],
        allid:[],//所有选择人员包括新增的id
        personchuan:[],//所有传参人员的信息
        shequadd: '',
        jiedaoadd: '',
        qujiadd: '', //区级新增输入框
        // saomachuan: '',
        renwuchuan: '', //专项任务选择传string
        audience: '', //受众
        theme: '', //主题
        list_img: [], //图片
        list_mv: [], //视频
        show_path: null, //请求路径
        styleId: '', //方式id
        stylename: '', //方式name
        wordnumber: 0,
        lev: '',
        terminal:false,
        router: '',
        is_ok:false,
      };
    },
    components: {
      [Toast.name]: Toast
    },
    destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    methods: {
      stopPlay(){
        this.$yy.stop();
      },
      inputjy(x) {
        if (x == 1) {
          if (this.qujiadd !== '') {
            this.qujiadd = this.qujiadd.replace(/[,|、]/g, '，');
          }
        } else if (x == 2) {
          if (this.jiedaoadd !== '') {
            this.jiedaoadd = this.jiedaoadd.replace(/[,|、]/g, '，');
          }
        } else {
          if (this.shequadd !== '') {
            this.shequadd = this.shequadd.replace(/[,|、]/g, '，');
          }
        }
      },
      Textarea(e) {
        var num = this.txtbxnr.length
        if (num < 0) {
          num = 0;
        }
         this.wordnumber = num
        var commentListEl = document.getElementById('txtbxnr')
        if (e.target.scrollHeight >1000) {
          return false
        }
        // console.log(e.target.scrollHeight)
        // console.log(e)
        commentListEl.style.height =1000 - e.target.scrollHeight + 'px'
        e.target.style.height = 'auto'
        e.target.style.height = e.target.scrollHeight+10+'px'
      },
      stopMP() {},
      lastyes() {
        let that = this;
        let ly_file = $(".ly_play").attr("data-url");
        let second = $(".ly_s").html()
        console.log(this.personnum)
        console.log(ly_file)
        if (that.leibiename == "") {
          that.namess = '请选择方式'
          that.tishitan = true;
        } else if (that.txtbxnr == '') {
          that.namess = '请输入内容'
          that.tishitan = true;
        } else if (that.list_img.length < 1 && that.list_mv.length < 1) {
          that.namess = '请添加图片或上传视频'
          that.tishitan = true;
        } else {
          if(this.is_ok){
            return false
          }
          that.updata_img(ly_file, second)
        }
      },
      updata_img(ly_file, second) {
        let that = this;
        console.log(that.personchuan)
        var yeschuan = ''
        if(that.personchuan.length!==0){
          that.personchuan.forEach((v, index) => {
            yeschuan += ':' + v
          })
          yeschuan = yeschuan.substring(1)
        }
        if(that.personnum==""){
          that.personnum=1
        }else{
          that.personnum=Number(that.personnum)
          that.personnum+=1
        }
        // alert(that.personnum)
        console.log(yeschuan)
        console.log(that.personnum)
        that.is_ok=true
        plus.nativeUI.showWaiting("正在加载");
        let task = plus.uploader.createUpload(
          that.$global_msg.Url.host + '/partroInspection/deloymentSave', {
            method: "POST"
          },
          function(t, status) {
            // 上传完成
            let res = JSON.parse(t.responseText);
            console.log(res)
            // alert(JSON.stringify(res))
            // if (status == 200) {
              plus.nativeUI.closeWaiting();
              if (res.code === 200) {
                that.stopPlay();
                // let a = JSON.parse(sessionStorage.getItem('choosestyle'));
                // if (!a.router) {
                //   that.$router.push("/xcbs_list")
                // } else {
                //   that.$router.push(a.router)
                // }
                // sessionStorage.removeItem('choosestyle');
                that.$router.go(-1);
              } else {
                Toast(res.msg)
                that.is_ok=false
              }
            // }
          });
        let a = ''
        that.list_img.map(res => {
          a += ',' + res.imgs;
        })
        let c = a.substring(1)
        let d = ''
        that.list_mv.map(res => {
          d += ',' + res.video;
        })
        let e = d.substring(1)
        task.addFile(ly_file, {
          key: "multipartFile"
        }); //上传的录音文件
        task.addData("userId", that.userId + ""); //userid
        task.addData("userInfoVos", yeschuan + ""); //参与人数选择
        task.addData("task", that.renwuchuan + ""); //专项任务
        task.addData("number", that.personnum+ ""); //参与人数
        task.addData("imgurl", c + ""); //图片 3.27that改为this
        task.addData("videourl", e + ""); //视频
        task.addData("title", that.txtbxnr + ""); //描述
        task.addData("patrolTroubleshootId", that.patrolTroubleshootId + ""); //
        task.addData("contractime", second + ""); //语音时长
        task.addData("imgText", that.imgText.toString()); //图片描述
        task.addData("deployId", that.styleId + ""); //方式id
        task.addData("theme", that.theme + ""); //主题
        task.addData("audience", that.audience + ""); //受众
        task.start();
      },
      getBack() {
        this.stopPlay();
        // let a = JSON.parse(sessionStorage.getItem('choosestyle'));
        // console.log(a.router)
        // if (!a.router) {
        //   this.$router.push("/xcbs_list")
        // } else {
        //   this.$router.push(this.router)
        // }
        // sessionStorage.removeItem('choosestyle');
        this.$router.back();
      },
      zhuantan() {
        this.zhuanshow = true
      },
      persontan() {
        this.persontanbox = true
        // this.getperson()
      },
      ly() { //  语音
        let that = this;
        if (that.terminal !== true) {
          $(".yuyin_list").hide(); //隐藏录音按钮
        }
        this.$yy.ly_fun({
          play_img: require("../../assets/images/play.png"),
          playing_img: require("../../assets/images/play_dt.gif"),
          _this: this
        }, function(res) {
          that.txtbxnr += res
          // alert(res)
          var num = that.txtbxnr.length
          if (num < 0) {
            num = 0;
          }
          that.wordnumber = num
          if (that.txtbxnr.length >= 500) {
            // that.txtbxnr=res
            return that.$toast('文字限制在500字以内!')
          }
        });
      },
      xuanzhe(e) {
        $(e.currentTarget).parents(".zxrw_fj").find(".jtrw").toggleClass("hide")
        $(e.currentTarget).parents(".zxrw_fj").siblings().find(".jtrw").addClass("hide")
      },
      zhuanchildren(n, item, index) {
        var xuanz = n.xuanz ? false : true;
        this.zhuanlist[index].list[item].xuanz = xuanz;
        this.$forceUpdate()
      },
      zhuanyes() { //专项任务的确定按钮
        this.zhuanshow = false
        console.log($(".zxrw_fj .active"))
        let fid = []
        let did = []
        let fidname = []
        let didname = []
        let html = ""
        let str = ""
        $(".zxrw_fj .active").each(function(i, item) {
          fidname.push($(item).attr("data-name"))
          didname.push($(item).attr("name"))
          fid.push($(item).attr("data-id"))
          did.push({
            dataid: $(item).attr("data-id"),
            id: $(item).attr("id")
          })
        })
        fidname = [...new Set(fidname)]
        console.log(fidname)
        console.log(didname)
        this.zhuanname = fidname.join()
        this.jutiname = didname.join()
        fid = [...new Set(fid)]
        for (let i of fid) {
          html += "|"
          for (let ii of did) {
            if (i == ii.dataid) {
              html += "," + ii.id
            }
          }
        }
        html = html.substring(1).split("|")
        for (let i = 0; i < fid.length; i++) {
          for (let ii = 0; ii < html.length; ii++) {
            if (i == ii) {
              str += "a" + fid[i] + "," + html[i]
            }
          }
        }
        str = str.substring(1)
        console.log(str)
        this.renwuchuan = str
      },
      btn(e) {
        $(e.currentTarget).parents(".boxg").find(".close_flex_next").toggleClass("hide")
        $(e.currentTarget).parents(".boxg").siblings().find(".close_flex_next").addClass("hide")
      },
      qujichoose(v, index) { //区级的选择点击
        var xuanz = v.xuanz ? false : true;
        this.qujilist[index].xuanz = xuanz;
        this.$forceUpdate();
        if (v.xuanz) {
          this.personnum_1 += 1
          if( this.personnum_1!==0){
            this.personnum=this.personnum_1
          }else{
            this.personnum=""
          }
        } else {
          this.personnum_1 -= 1
          if( this.personnum_1!==0){
            this.personnum=this.personnum_1
          }else{
            this.personnum=""
          }
        }
      },
      jiedaochoose(v, index) {
        var xuanz = v.xuanz ? false : true;
        this.jiedaolist[index].xuanz = xuanz;
        this.$forceUpdate();
        if (v.xuanz) {
          this.personnum_1 += 1
          if( this.personnum_1!==0){
            this.personnum=this.personnum_1
          }else{
            this.personnum=""
          }
        } else {
          this.personnum_1 -= 1
          if( this.personnum_1!==0){
            this.personnum=this.personnum_1
          }else{
            this.personnum=""
          }
        }
      },
      shequchoose(v, index) {
        var xuanz = v.xuanz ? false : true;
        this.shequlist[index].xuanz = xuanz;
        this.$forceUpdate();
        if (v.xuanz) {
          this.personnum_1 += 1
          if( this.personnum_1!==0){
            this.personnum=this.personnum_1
          }else{
            this.personnum=""
          }
        } else {
          this.personnum_1 -= 1
          if( this.personnum_1!==0){
            this.personnum=this.personnum_1
          }else{
            this.personnum=""
          }
        }
      },
      personyes() { //参加人员的确定按钮
        this.persontanbox = false
        var _this = this
        let qujiname = []
        var jiedaoname = []
        var shequname = []
        let qujiaddperson = []
        let allid=[]
        let chuan = []
        console.log(_this.qujiadd)
        if (_this.qujiadd !== "") {
          console.log(_this.qujiadd.split("，"))
          _this.qujiadd.split('，').forEach((x) => {
            let a =`null,,,0,,,${x},,,null`
            chuan.push(a)
            qujiname.push(x)
            qujiaddperson.push({
              addname: `0,,,${x}`
            })
          })
          _this.qujiadd = ""
        }
        if (_this.jiedaoadd !== "") {
          console.log(_this.jiedaoadd.split("，"))
          _this.jiedaoadd.split('，').forEach((x) => {
            let a =`null,,,1,,,${x},,,null`
            chuan.push(a)
            jiedaoname.push(x)
            qujiaddperson.push({
              addname: `1,,,${x}`
            })
          })
          _this.jiedaoadd = ""
        }
        if (_this.shequadd !== "") {
          console.log(_this.shequadd.split("，"))
          _this.shequadd.split('，').forEach((x) => {
            let a =`null,,,2,,,${x},,,null`
            chuan.push(a)
            shequname.push(x)
            qujiaddperson.push({
              addname: `2,,,${x}`
            })
          })
          _this.shequadd = ""
        }
        var addpersonchuan = ''
        qujiaddperson.forEach((v, index) => {
          addpersonchuan += ':' + v.addname
        })
        addpersonchuan = addpersonchuan.substring(1)
        console.log(addpersonchuan)
        _this.qujilist.forEach((n, item) => {
          if (n.xuanz == true) {
            // let a =`${n.dwid},,,${n.lev},,,${n.username},,,${n.teamUser}`
            let a = `${n.dwid},,,${n.lev},,,${n.username},,,${n.teamUser},,,${n.id}`
            chuan.push(a)
              allid.push(n.id)
            if (n.teamUser !== 0||n.teamUser==null) {
              qujiname.push(n.username);
            }
          }
        })

        _this.qujiname=qujiname.join()
        _this.jiedaolist.forEach((n, item) => {
          if (n.xuanz == true) {
            // let a =`${n.dwid},,,${n.lev},,,${n.username},,,${n.teamUser}`
            let a = `${n.dwid},,,${n.lev},,,${n.username},,,${n.teamUser},,,${n.id}`
            chuan.push(a)
            allid.push(n.id)
            if (n.teamUser !== 0||n.teamUser==null) {
              jiedaoname.push(n.username);
            }
          }
        })
        console.log(jiedaoname)
        _this.jiedaoname =  jiedaoname.join()
        _this.shequlist.forEach((n, item) => {
          if (n.xuanz == true) {
            // let a =`${n.dwid},,,${n.lev},,,${n.username},,,${n.teamUser}`
            let a = `${n.dwid},,,${n.lev},,,${n.username},,,${n.teamUser},,,${n.id}`
            chuan.push(a)
            allid.push(n.id)
            shequname.push(n.username);
          }
        })
        console.log(shequname)
        _this.shequname =shequname.join()
        _this.personchuan=chuan
        console.log(chuan)
        this.axios.get(this.$global_msg.Url.host + "/Xx/insertPersonnelLevel?patrolTroubleshootId=" + _this.patrolTroubleshootId +'&newUserInfoVos=' + addpersonchuan + '&userId=' + _this.userId + '&type=1')
          .then(res => {
            console.log(res)
           res.data.rows.forEach((n)=>{
             allid.push(n)
           })
           if(res.data.rows.length!==0){
            _this.personnum_1+=res.data.rows.length
            _this.personnum= _this.personnum_1
           }
            _this.allid=allid
            console.log(allid)
            _this.getperson()
          }).catch(e => terminal._error(e));
      },
      clickpicture() { //点击图片
        this.btm_show = true
      },
      xc() { //相册
        let _this = this;
        _this.btm_show = false;
        upload.xiangce('image', true, function(path) {
          console.log(path);
          path.map(res => {
            // alert(res)
            console.log(res)
            _this.uploadImg(res);
          })
        }, function(msg) {
          if (msg !== 'User cancelled') {
            _this.$toast(msg);
          }
        });
      },
      sp() {
        let that = this;
        that.btm_show = false;
        upload.record(function(path) {
          console.log(path);
          // alert(path)
          // let a = Array.from(path)
          //获取视频信息
          // a.map(res => {
          // })
          //获取视频信息
          plus.io.getVideoInfo({
            filePath: path,
            success: function(data) {
              // alert(JSON.stringify(data))
              console.log(data.duration)
              //视频时间15秒以内才上传
              if ((data.duration * 1) >11) {
                that.$toast('上传的视频时间请在10秒以内');
                return;
              } else {
                that.uploadVideo(path);
              }
            },
            fail: function(e) {
              that.$toast(e.msg);
            }
          });

        }, function(msg) {
          if (msg !== 'User cancelled') {
            // that.$toast(msg+"错误2");
          }
        });
      },
      pz() {
        let that = this;
        that.btm_show = false;
        upload.paizhao(function(path) {
          // alert(path)
          console.log(path);
          that.uploadImg(path);
        }, function(msg) {
          if (msg !== 'resultCode is wrong') {
            that.$toast(msg);
          }
        });
      },
      tost() {
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log(e.message);
        }
      },
      uploadImg(path) { //上传图片
        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let params = {};
        upload.uploadImg(that.$global_msg.Url.hosts + '/partroInspection/uploadImg', 'POST', params, path,
          'multipartFile',
          function(data) {
            if (data.code == 200) {
              that.list_img.push({
                imgs: data.rows
              })
            } else {
              that.$toast(data.msg);
            }
            that.tost();
          },
          function(msg) {
            if (msg !== 'User cancelled') {
              that.$toast(msg);
            }
            that.tost();
          });
      },
      uploadVideo(path) { //上传视频
        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let params = {};
        upload.uploadVideo(that.$global_msg.Url.hosts + '/partroInspection/uploadMV', 'POST', params, path,
          'multipartFile',
          function(data) {
            that.tost();
            // alert(JSON.stringify(data))
            data = JSON.parse(data);
            if (data.code == 200) {
              that.list_mv.push({
                video: data.rows
              });
            } else {
              console.log(data);
              that.$toast(data.msg);
            }

          },
          function(msg) {
            // that.$toast(msg+"错误4");
            // that.tost();
          });
      },
      showDesc(i) { //显示图片描述
        this.list_img[i].showDesc = !this.list_img[i].showDesc;
        this.$forceUpdate();
      },
      del(i, type) { //删除图片
        if (type == 'img') {
          if (this.list_img[i].id) { //不是新上传的图片
            this.delImg.push(this.list_img[i].id);
            this.list_img.splice(i, 1);
            this.imgText.splice(i, 1);
          } else {
            this.list_img.splice(i, 1);
            this.imgText.splice(i, 1);
          }
        } else {
          if (this.list_mv[i].id) { //不是新上传的视频
            this.delMv.push(this.list_mv[i].id);
            this.list_mv.splice(i, 1);
          } else {
            this.list_mv.splice(i, 1);
          }
        }
      },
      getzhuan() { //获取专项任务列表
        this.axios.get(
          `${this.$global_msg.Url.host}/partroInspection/selectTask?patrolTroubleshootId=${this.patrolTroubleshootId}&userId=${this.userId}`, {
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
          console.log(res)
          if (res.data.code == 200) {
            this.zhuanlist = res.data.rows.task
          } else {
            this.$toast(res.data.msg)
          }
        }).catch(e => terminal._error(e));
      },
      getperson() { //获取参加人员列表
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/partroInspection/deploymentChoosePeople?userId=${this.userId}&patrolTroubleshootId=${this.patrolTroubleshootId}`, {
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
          console.log(res)
          if (res.data.code == 200) {
            this.qujilist = res.data.rows.diStriCtLevel
            this.jiedaolist = res.data.rows.dePartMent.concat(res.data.rows.street)
            this.shequlist = res.data.rows.community
            this.lev = res.data.rows.lev
            // let saomachuan = ''
            // saomachuan = ':' + res.data.rows.dwid + ',,,' + res.data.rows.lev + ',,,' + res.data.rows.name + ',,,' + res.data.rows.teamUser
            // this.saomachuan = saomachuan.substring(1)
            var _this = this
            console.log(_this.allid)
            if (_this.allid.length != 0) {
              _this.qujilist.forEach((v, index) => {
                _this.allid.forEach((x) => {
                  if (v.id == x) {
                    var xuanz = v.xuanz ? false : true;
                    _this.qujilist[index].xuanz = xuanz
                    this.$forceUpdate();
                  }
                })
              })
              _this.jiedaolist.forEach((v, index) => {
                _this.allid.forEach((x) => {
                  if (v.id == x) {
                    var xuanz = v.xuanz ? false : true;
                    _this.jiedaolist[index].xuanz = xuanz
                    this.$forceUpdate();
                  }
                })
              })
              _this.shequlist.forEach((v, index) => {
                _this.allid.forEach((x) => {
                  if (v.id == x) {
                    var xuanz = v.xuanz ? false : true;
                    _this.shequlist[index].xuanz = xuanz
                    this.$forceUpdate();
                  }
                })
              })
            }
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log('plus问题');
            }
          } else {
            this.$toast(res.data.msg)
          }
        }).catch(e => terminal._error(e));
      },

    },
    mounted() {
      var _this = this;
      document.body.style.overflowY = 'auto';
      document.body.style.backgroundColor = "#F7F7F9";
      this.terminal = terminal.terminals().android;
      this.show_path = this.$global_msg.Url.hosts + '';
      $('.textare').on('input', function() {
        this.style.height = 'auto';
        this.style.height = this.scrollHeight - 20 + "px";
      });
      this.ly()
      //切换后台
      document.addEventListener("pause", function(){
        _this.stopPlay();
      }, false);
      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.getBack();
      // }, false);
    },
    created() {
      this.userId = localStorage.getItem("userId") //获取访问id
      console.log(this.userId + 111)
      var choosestyle = JSON.parse(sessionStorage.getItem("choosestyle"))
      console.log(choosestyle)
      this.styleId = choosestyle.id
      this.stylename = choosestyle.mc
      this.router = choosestyle.router;
      console.log(this.styleId)
      this.axios.post(`${this.$global_msg.Url.host}/partroInspection/deloymentSave?userId=${this.userId}`, {
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.patrolTroubleshootId = res.data.rows.patrolTroubleshootId
          console.log(this.patrolTroubleshootId)
          this.getperson()
          this.getzhuan()
        } else {
          this.$toast(res.data.msg)
        }
      }).catch( e => terminal._error(e))
    }
  };
</script>
<style scoped>
  .cesjiedao input {
    width: 100%;
    height: 80%;
    text-align: center;
  }

  .wordnum {
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    color: #666;
  }

  .img_sanjiao {
    width: 0.5rem;
    height: 0.5rem;
  }

  .canyu {
    margin-top: 0.2rem;
    background-color: white;
    border-radius: 0.2rem;
  }

  .iteminput {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #DDDDDD;
    /* align-items: center; */
    padding: 0.2rem 0.2rem;
  }

  .especil {
    margin-top: 0.2rem;
    margin-bottom: 0.1rem;
  }

  .iteminput textarea {
    text-align: left;
    /* border: 1px solid red; */
    width: 60%;
    height: auto;
    padding: 0.22rem 0;
  }

  .hide {
    display: none;
  }

  .van-popup--bottom {
    width: 95% !important;
    margin-left: 2.5%;
    background-color: rgba(0, 0, 0, 0);
  }

  .btm_tk_item {
    height: 1.388888rem;
    line-height: 1.388888rem;
    border-bottom: 1Px solid #DDDDDD;
    text-align: center;
    /* margin-left: 0.185185rem; */
    /* margin-right: 0.185185rem; */
    width: auto;
    background-color: #FFFFFF;
  }

  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
    color: #999999;
  }

  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }

  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border: 1Px solid #DDDDDD;
    text-align: center;
    margin-top: 0.185185rem;
    margin-bottom: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }

  .cesjiedao {
    width: 24%;
    border-bottom: 1px solid #DDDDDD;
    height: 1.388888rem;
    display: inline-block;
    line-height: 1.388888rem;
    text-align: center;
  }

  .personum {
    display: flex;
    justify-content: space-between;
    height: 1.388888rem;
    align-items: center;
    border-bottom: 1px solid #DDDDDD;
  }

  .personum input {
    /* text-align: center; */
    /* border: 1px solid red; */
    width: 50%;
  }

  .tishi_main {
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
  }

  .button {
    width: 30%;
    margin: auto;
    margin-top: 0.4rem;
    color: white;
    text-align: center;
    padding: 0.2rem 0;
    background-color: #2B6CFE;
    border-radius: 0.105185rem;
  }

  .active {
    color: #2B6CFE;
  }

  .van-popup {
    width: 80%;
    border-radius: 0.2rem;
    /* max-height:9rem; */
  }

  .contt1 {
    padding: 0 0.3rem;
    height: 9rem;
  }

  .contt {
    padding: 0 0.3rem;
  }

  .img_false {
    width: 0.4rem;
    height: 0.4rem;
  }

  .tan_title {
    display: flex;
    justify-content: space-between;
    height: 1.3rem;
    align-items: center;
    border-bottom: 1px solid #DDDDDD;
  }

  .tanlist {
    display: flex;
    align-items: center;
    padding: 0.3rem;
    border-bottom: 1px solid #DDDDDD;
  }

  .main {
    overflow-y: scroll;
    height: 6rem;
  }

  .tanchild {
    padding: 0 0.8rem;
  }

  .item_child {
    display: flex;
    align-items: center;
    color: #999999;
  }

  .item_son {
    display: flex;
    align-items: center;
    max-width: 60%;
    width: auto;
  }

  .img_appar {
    width: 0.5rem;
  }

  .item {
    /* height: 1.388888rem; */
    border-bottom: 1px solid #DDDDDD;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    padding: 0.4rem 0.2rem;
  }

  .yyandimg {
    border-radius: 0.2rem;
    background-color: white;
    padding: 0 0.15rem;
    margin-top: 0.2rem;
  }

  .contant {
    margin-top: 2rem;
    border: 1px solid #F7F7F9;
    border-radius: 0.2rem;
    background-color: white;
    padding: 0 0.15rem;
  }

  /* yinhuan复制 */
  /* 视频列表 */
  .video-list {
    padding-top: 0.259259rem;
    margin-bottom: 0.37037rem;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    border-top: 1px #DDDDDD solid;
  }

  .video-list video {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }

  .video-list video:first-child {
    margin-top: 0;
  }

  .video-list .del {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }

  .video-list .del img {
    width: 100%;
    height: 100%;
  }

  .voice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    width: 4rem;
    border: 1px solid #F7F7F9;
    color: #5F5D5C;
    margin: 0.3rem;
  }

  .voice img {
    margin-right: 0.2rem;
    width: 0.4rem;
  }

  /* 图片列表 */
  .img-box {
    margin-left: 0.17037rem;
    margin-right: 0.17037rem;
    margin-top: 0.34074rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }

  .img-box .img-item {
    width: 4.481481rem;
    height: 2.814814rem;
    background-image: url('../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
    border-radius: 30px;
  }

  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content {
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }

  .img-box .img-item .img-content .img-src {
    width: 100%;
    height: 100%;
    z-index: 11;
    object-fit: cover;
  }

  .img-box .img-item .img-content .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .img-box .img-item .img-content .img-group .img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }

  .img-box .img-item .img-content .img-group .img-btn:last-child {
    border-left: none;
  }

  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  /* 图片列表的描述 */
  .img-box .show-desc {
    height: 3.703703rem;
  }

  .img-box .img-item .img-desc {
    width: 100%;
    height: 0.851851rem;
    /* text-align: center; */
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }

  .img-box .show-desc .img-desc {
    display: block;
  }

  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .img-list:first-child {
    margin-left: 4.814814rem;
  }

  .img-list {
    /* display: inline-block; */
  }

  .imgs_ul {
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }

  .img_upload .img-item {
    z-index: 3 !important;
  }

  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .boxitem {
    position: relative;
    padding: 0px 0.3704rem;
    font-size: 0.3889rem;
    border-bottom: 1Px solid #DDDDDD;
    overflow: hidden;
  }

  .boxitem textarea {
    width: 100%;
    padding-top: 0.3704rem;
    /* max-height: 10rem; */
    height: 2.125rem;
    /* overflow: hidden; */
  }

  /* 语音 */
  .yuyin_list {
    width: 100%;
    height: 1.4815rem;
    position: relative;
    display: flex;
    padding: 0.2315rem 0.1111111111111111rem 0.2315rem 0.3704rem;
    word-break: break-all;
    font-size: 0.3888888888888889rem;
    background-color: #fff;
    /* border-bottom: 1Px solid #ddd; */
    box-sizing: border-box;
  }

  .ly {
    width: 3.0185185185185186rem;
    height: 1rem;
    border: 1Px solid #ddd;
    border-radius: 0.1111rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #757575;
    /* justify-content: center; */
  }

  .ly img {
    width: 0.3704rem;
    height: 0.5rem;
    margin: 0 0.2777777777777778rem;
    /* margin-right: 0.2777777777777778rem; */
  }

  .ly_play .ly>span {
    float: right;
    /* margin: 0.282222rem 0.9259259259259259rem 0 0; */
  }

  .ly_start .ly>span {
    float: right;
    /* margin: 0.2037037037037037rem 0.46296296296296297rem 0 0; */
  }

  .del_ly,
  .zhuan {

    width: 0.8518518518518519rem;
    margin: 0.09259259259259259rem 0 0 0.23148148148148148rem;
    height: 0.8518518518518519rem;
  }

  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    display: none;
  }

  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }

  .yc {
    display: none;
  }

  .ly_play>div {
    display: flex;
  }

  .ly_play {
    display: none;
  }
  .list-box {
    display: flex;
    align-items: center;
    border-bottom: 1Px solid #ddd;
    padding: 0.4rem 0.2rem;
    white-space: normal;
  }
  .dian{
    word-break: keep-all;
  }
  .zxrw_fj {
  }
  .jtrw > div {
    padding: 0.3rem 1rem;
  }
</style>
